<script setup lang="ts">
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onActivated,
  onDeactivated,
} from "vue";

onBeforeMount(() => {
  console.log("onBeforeMount：组件挂载前");
});

onMounted(() => {
  console.log("onMounted：组件挂载完成后");
});

onBeforeUpdate(() => {
  console.log("onBeforeUpdate：组件更新前");
});

onUpdated(() => {
  console.log("onUpdated：组件更新后");
});
onBeforeUnmount(() => {
  console.log("onBeforeUnmount：组件卸载前");
});
onUnmounted(() => {
  console.log("onUnmounted：组件卸载后");
});
onActivated(() => {
  console.log("onActivated：组件被激活");
});
onDeactivated(() => {
  console.log("onDeactivated：组件被停用");
});
</script>

<template>
  <div class="reactive-wrap">
    <h1>生命周期</h1>
  </div>
</template>
<style>
h1 {
  text-align: center;
}
h3 {
  text-align: center;
}
</style>
